<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>cxCalendar 日期选择器 &raquo; 在线演示 - 前端开发仓库</title>
<link rel="stylesheet" href="css/jquery.cxcalendar.css">
<style>
body{background:#ddd;font:14px/1.7 tahoma,'\5fae\8f6f\96c5\9ed1',sans-serif;}
h1,h2,h3{font-size:36px;line-height:1;}
h2{font-size:24px;}
h3{font-size:18px;}
fieldset{margin:2em 0;}
fieldset legend{font-weight:bold;font-size:16px;line-height:2;}
input,select,button{padding:0.5em;}
a{color:#06f;text-decoration:none;}
a:hover{color:#00f;}

.wrap{width:800px;margin:0 auto;padding:20px 40px;border-radius:8px;background:#fff;box-shadow:0 0 10px rgba(0,0,0,0.5);}
</style>
</head>
<body>
<div class="wrap">
  <h1>jQuery cxCalendar 日期选择器</h1>

  <h2>示例</h2>

  <fieldset>
    <legend>默认</legend>
 
    <input class="date_b" name="mydate" type="text" readonly>
  </fieldset>

  <fieldset>
    <legend>默认1</legend>
    <label for="date_a">选择日期：</label>
    <input class="date_b" name="mydate" type="text" readonly>
  </fieldset>

  <fieldset>
    <legend>默认1</legend>
    <label for="date_a">选择日期：</label>
    <input class="date_b" name="mydate" type="text" readonly>
  </fieldset>
<button class="button">1</button>
<button class="btn">2</button>
  
  <!--<fieldset>-->
    <!--<legend>在 &lt;input&gt; 的 value 中设置默认值</legend>-->
    <!--<label for="date_b">选择日期：</label>-->
    <!--<input id="date_b" type="text" value="1988-1-31" readonly>-->
  <!--</fieldset>-->
  
  <!--<fieldset>-->
    <!--<legend>在参数中设置默认日期</legend>-->
    <!--<label for="date_c">选择日期：</label>-->
    <!--<input id="date_c" type="text" value="" readonly>-->
  <!--</fieldset>-->

  <!--<fieldset>-->
    <!--<legend>选择日期和时间</legend>-->
    <!--<label for="date_d">选择日期：</label>-->
    <!--<input id="date_d" name="mydate" type="text" readonly>-->
  <!--</fieldset>-->

  <!--<fieldset>-->
    <!--<legend>限制可选日期</legend>-->
    <!--<label for="date_e">选择日期：</label>-->
    <!--<input id="date_e" name="mydate" type="text" readonly>-->
    <!--&lt;!&ndash; <input id="date_e" name="mydate" type="text" readonly data-onday="1,2,3,4,5" data-unday="1,1-5,2017-1-10"> &ndash;&gt;-->
  <!--</fieldset>-->

  <!--<fieldset>-->
    <!--<legend>自定义节假日</legend>-->
    <!--<label for="date_f">选择日期：</label>-->
    <!--<input id="date_f" name="mydate" type="text" readonly>-->
  <!--</fieldset>-->

  <!--<p><a target="_blank" href="http://code.ciaoca.com/jquery/cxCalendar/demo/">查看更多示例</a></p>-->

  <!--<h2>文档</h2>-->
  <!--<ul>-->
    <!--<li><a target="_blank" href="https://github.com/ciaoca/cxCalendar">Github</a></li>-->
    <!--<li><a target="_blank" href="http://code.ciaoca.com/jquery/cxcalendar/">中文文档</a></li>-->
  <!--</ul>-->
  <!---->
  <!--<h2>作者</h2>-->
  <!--<p><a target="_blank" href="http://ciaoca.com/">http://ciaoca.com/</a></p>-->
  <!--<p>Released under the MIT license</p>-->
</div>

<script src="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"></script>
<script src="js/jquery.cxcalendar.js"></script>
<script src="js/jquery.cxcalendar.languages.js"></script>
<script>
$('.button').on('click',function(){
  $('.wrap').append( $('<fieldset>').append($('<input>').attr({
    class:'date_b',
    name:'mydate',
    type:'text'
  })));
  // $('.date_b').cxCalendar();
})
//$('#date_a').cxCalendar();
$('.btn').on('click',function(){
  $('.date_b').cxCalendar();
})
 $('.date_b').cxCalendar();
  $('.date_b').cxCalendar();

//// 在 value 中有默认值
//$('#date_b').cxCalendar();
//
//// 在参数中设置默认日期
//$('#date_c').cxCalendar({
//  date: '1988/1/31'
//});
//
//// 选择日期和时间
//$('#date_d').cxCalendar({
//  type: 'datetime',
//  format: 'YYYY-MM-DD HH:mm:ss'
//});
//
//// 限制可选日期
//$('#date_e').cxCalendar({
//  wday: 0,
//  onday: [1,2,3,4,5],
//  // type: 'datetime',
//  // format: 'YYYY-MM-DD HH:mm:ss',
//  unday: [
//    '3',
//    '7-5',
//    '7-15',
//    '7-25',
//    '2017-7-10',
//    '2017-7-20',
//    '2017-7-30'
//  ],
//  endDate: '2017-08-31'
//});
//
//// 自定义节假日
//$('#date_f').cxCalendar({
//  baseClass: 'cxcalendar_holyday'
//});
</script>
</body>
</html>
